<template>
  <div class="volunteer-review-admin">
    <div class="page-header">
      <h1 class="page-title">志愿服务审核</h1>
      <p class="page-subtitle">审核党员填报的志愿服务记录</p>
    </div>

    <el-card>
      <div class="filter-bar">
        <el-select v-model="filters.status" placeholder="状态" clearable style="width: 140px" @change="load">
          <el-option label="待审核" value="PENDING" />
          <el-option label="已通过" value="APPROVED" />
          <el-option label="已驳回" value="REJECTED" />
        </el-select>
        <el-date-picker v-model="filters.dates" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="load" />
      </div>

      <el-table :data="list" v-loading="loading">
        <el-table-column prop="serviceDate" label="日期" width="120" />
        <el-table-column prop="serviceTitle" label="主题" min-width="220" show-overflow-tooltip />
        <el-table-column prop="serviceType" label="类型" width="140" />
        <el-table-column prop="serviceHours" label="时长(h)" width="100" />
        <el-table-column prop="location" label="地点" min-width="160" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="110" />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="view(row)">查看</el-button>
            <el-button size="small" type="success" v-if="row.status==='PENDING'" @click="approve(row)">通过</el-button>
            <el-button size="small" type="danger" v-if="row.status==='PENDING'" @click="reject(row)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="showView" title="志愿服务详情" width="700px">
      <el-descriptions :column="1" border v-if="current">
        <el-descriptions-item label="日期">{{ current.serviceDate }}</el-descriptions-item>
        <el-descriptions-item label="主题">{{ current.serviceTitle }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ current.serviceType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="时长">{{ current.serviceHours || '-' }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ current.location || '-' }}</el-descriptions-item>
        <el-descriptions-item label="说明">{{ current.description || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ current.status }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="showView=false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllVolunteers, reviewVolunteer } from '@/api/volunteer'

const loading = ref(false)
const list = ref([])
const showView = ref(false)
const current = ref(null)

const filters = reactive({ status: 'PENDING', dates: [] })

const load = async () => {
  try {
    loading.value = true
    const params = {}
    if (filters.status) params.status = filters.status
    if (filters.dates?.length === 2) { params.startDate = filters.dates[0]; params.endDate = filters.dates[1] }
    const res = await getAllVolunteers(params)
    list.value = res?.data || res || []
  } finally {
    loading.value = false
  }
}

const view = (row) => { current.value = row; showView.value = true }
const approve = async (row) => { await doReview(row, 'APPROVED') }
const reject = async (row) => { await doReview(row, 'REJECTED') }
const doReview = async (row, status) => {
  try {
    await ElMessageBox.confirm(`确定将该记录标记为${status==='APPROVED'?'通过':'驳回'}吗？`, '审核确认', { type: 'warning' })
    await reviewVolunteer(row.id, { status })
    ElMessage.success('操作成功')
    await load()
  } catch (e) {
    if (e !== 'cancel') ElMessage.error(e?.response?.data || e?.message || '审核失败')
  }
}

load()
</script>

<style scoped>
.filter-bar { display: flex; gap: 12px; margin-bottom: 12px; }
</style> 